<template>
    <div class="container">
        <div class="container-box">
            <div class="content-box">
                <div class="data" v-for="res in clientData">
                    <div class="today-data">
                        <div class="today-content">
                            <div>{{ res.name }}</div>
                            <span>{{ res.today }}</span>
                        </div>
                        <img class="today-img" :src="res.img" alt="#" />
                    </div>
                    <div class="formerly-data">
                        <span class="formerly-title">昨日总数：</span>
                        <div class="formerly-quantity">{{ res.yesterday }}</div>
                        <a-tooltip :title="res.tooltipContent"
                            ><QuestionCircleOutlined style="color: rgba(0, 0, 0, 0.45)"
                        /></a-tooltip>
                    </div>
                    <div class="statistics">
                        <div class="statistics-data" v-for="it in res.trend">
                            <span class="statistics-title">{{ it.title }}</span>
                            <CaretUpFilled v-if="it.status === 'rise'" style="color: #00c270" />
                            <CaretDownFilled v-else-if="it.status === 'fall'" style="color: #fb584e" />
                            <span class="statistics-quantity">{{ it.value }}%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="navigation-box">
                <div class="user-message">
                    <img class="head-portrait" :src="profilePhoto.img" alt="#" />
                    <div class="user-text">
                        <span class="user-name">{{ profilePhoto.name }}</span>
                        <div class="user-tag">子账号</div>
                    </div>
                </div>
                <div class="seat-box">
                    <div class="seat-sort" v-for="item in profilePhoto.quantity">
                        <span class="seat-title">
                            <div style=""></div>
                            {{ item.title }}</span
                        >
                        <div class="seat-data">{{ item.value }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {QuestionCircleOutlined, CaretUpFilled, CaretDownFilled} from "@ant-design/icons-vue";
import kh1 from "@/assets/image/kh1.png";
import kh2 from "@/assets/image/kh2.png";
import kh3 from "@/assets/image/kh3.png";
import tx from "@/assets/image/tx.png";
const clientData = ref([
    {
        name: "客户总数",
        img: kh3,
        today: 124,
        yesterday: 2321,
        tooltipContent: `昨日客户总数：</br>
                           截止至昨日，所有企微号添加的客户数量总和，不去重；</br>
                           日、周、月：</br>
                           分别计算昨日数据相比1天、7天、30天前的变化情况；`,
        trend: [
            {title: "日", status: "rise", value: 0.2},
            {title: "周", status: "fall", value: -0.1},
            {title: "月", status: "fall", value: -0.2},
        ],
    },
    {
        name: "今日新增客户",
        img: kh2,
        today: 214,
        yesterday: 2321,
        tooltipContent: `昨日客户总数：</br>
                           截止至昨日，所有企微号添加的客户数量总和，不去重；</br>
                           日、周、月：</br>
                           分别计算昨日数据相比1天、7天、30天前的变化情况；`,
        trend: [
            {title: "日", status: "rise", value: 0.2},
            {title: "周", status: "fall", value: -0.1},
            {title: "月", status: "rise", value: -0.2},
        ],
    },
    {
        name: "今日流失客户",
        img: kh1,
        today: 324,
        yesterday: 2321,
        tooltipContent: `昨日新增客户：
昨日所有企微号添加的客户数量总和，同个客户多个成员添加，不去重；
日、周、月：
分别计算昨日数据相比1天、7天、30天前的变化情况；`,
        trend: [
            {title: "日", status: "fall", value: 0.2},
            {title: "周", status: "rise", value: -0.1},
            {title: "月", status: "rise", value: -0.2},
        ],
    },
]);
const profilePhoto = ref({
    name: "名字",
    tag: "子账号",
    img: tx,
    quantity: [
        {
            title: "席位数",
            value: 234,
        },
        {
            title: "当前在线数：",
            value: 234,
        },
        {
            title: "子账号席位数：",
            value: "不限",
        },
        {
            title: "子账号在线数：",
            value: 234,
        },
    ],
});
</script>
<style scoped lang="less">
.container {
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
}
.container-box {
    display: flex;
    width: 100%;
    min-height: 100%;
    gap: 16px;
    .content-box {
        flex: 1 0;
        background-color: #fff;
        padding: 12px;
        display: flex;
        border-radius: 4px;
        align-content: flex-start;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        .data {
            padding: 0 16px;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            background-color: #f7f7f7;
            width: 32%;
            .today-data {
                display: flex;
                height: 80px;
                background-repeat: no-repeat;
                background-size: cover;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
                .today-content {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    color: rgba(0, 0, 0, 0.85);
                    div {
                        font-size: 14px;
                        line-height: 22px;
                    }
                    span {
                        font-weight: bold;
                        font-size: 24px;
                    }
                }
                .today-img {
                    width: 40px;
                    height: 40px;
                }
            }
            .formerly-data {
                display: flex;
                align-items: center;
                color: rgba(0, 0, 0, 0.85);
                padding: 12px 8px 8px 0;
                font-size: 14px;
                line-height: 22px;
                .formerly-title {
                    color: rgba(0, 0, 0, 0.85);
                }
                .formerly-quantity {
                    color: rgb(251, 88, 78);
                    margin-right: 10px;
                }
            }
            .statistics {
                color: rgba(0, 0, 0, 0.85);
                padding: 0 0 12px;
                display: flex;
                .statistics-data {
                    margin-right: 8px;
                    width: 80px;
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.85);
                    display: flex;
                    flex-direction: row;
                    .statistics-title {
                        margin-right: 3px;
                    }
                    .statistics-quantity {
                    }
                }
            }
        }
    }
    .navigation-box {
        width: 320px;
        flex-shrink: 0;
        background-color: #fff;
        padding: 12px;
        border-radius: 4px;
        .user-message {
            display: flex;
            .head-portrait {
                width: 60px;
                height: 60px;
            }
            .user-text {
                flex: 1 0;
                padding-left: 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .user-name {
                    color: rgba(0, 0, 0, 0.85);
                    font-weight: 600;
                    font-size: 16px;
                }
                .user-tag {
                    background: #ffede3;
                    border-radius: 2px;
                    padding: 4px 6px;
                    color: #f90;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    max-width: 60px;
                    border-radius: 3px;
                }
            }
        }
        .seat-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            border-radius: 4px;
            .seat-sort {
                width: 50%;
                height: 66px;
                border-radius: 2px;
                padding: 8px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .seat-title {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    color: rgba(0, 0, 0, 0.45);
                    font-size: 12px;
                    div {
                        width: 3px;
                        height: 8px;
                        background-color: #3070ff;
                        border-radius: 1px;
                    }
                }
                .seat-data {
                    font-weight: 600;
                    color: #000;
                    font-size: 18px;
                }
            }
        }
    }
}
</style>
